iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
1
自我挑戰組

愛寫什麼就寫什麼,開心最重要系列 第 9

Day9-Alpine.js之把js資料丟進html

  • 分享至 

  • xImage
  •  
<div x-data="initialData()" x-init="init()">
    <div :style="'width: '+width+'px; background: purple;'">hey</div>

    <button x-ref="inc">increase</button>
</div>

<script>
    function initialData() {
        return {
            width: 20,
            init() {
                this.$refs.inc.addEventListener('click', () => {
                    this.width = this.width + 20
                })
            }
        }
    }
</script>

今天要跟大家說明把js裡的東西如何丟進html以及互動,
這邊示範點擊後寬度會隨之增加。

首先x-data="initialData()"在這可以直接丟進function的名稱,
而這個function需要return值進去,就相當於直接在上面預設了!
x-init="init()"而這裡是初始會執行的function,
它包含在x-data指定的function之中。
<div :style="'width: '+width+'px; background: purple;'">hey</div>這行就是我們要增加寬度的東西,
後面設定背景色就不說明了,
:style="'width: '+width+'px這段就是會隨著js變動寬度的關鍵之一,
可以看到他的寬度是變數,
那麼這個變數值哪裡來呢?
首先在x-data中就先預設20,
接著看到<button x-ref="inc">increase</button>
重點在於x-ref="inc"
對應到js裡面的
init() { this.$refs.inc.addEventListener('click', () => { this.width = this.width + 20 }) }
在這前面的this.$refs.inc就會指向<button x-ref="inc">increase</button>
後面addEventListener('click', () => {})就寫入了觸發事件,
那麼事件觸發時執行this.width = this.width + 20
隨著這變動,上方:style="'width: '+width+'px就會隨著改變,
因此,每點擊一次按鈕,寬度都會比上次寬20了。


上一篇
Day8-Alpine.js之x-for迴圈跑數字
下一篇
Day10-Alpine初入"魔術屬性"
系列文
愛寫什麼就寫什麼,開心最重要30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言